<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view style="min-height: 100vh" class="bg-gray">
    <!--师傅名片-->
    <view class="mx-4">
      <!--名片容器-->
      <view class="w-full h-40 rounded-2xl relative">
        <image class="w-full h-40 rounded-2xl" :src="info.backgroundUrl" />
        <view class="cardContent absolute left-5 right-3 top-6">
          <view class="flex justify-between">
            <view>
              <view
                class="text-lg font-medium leading-7 mb-1.5"
                :class="themeBg == 4 ? 'text-white' : 'text-dark'"
                v-if="info.isShowNick"
                >{{ info.nickName }}</view
              >
              <view class="flex items-center py-0.5" v-if="info.isShowWechat"
                ><view v-if="themeBg == 4"
                  ><u-icon
                    name="/static/icons/icon-wechat-white.png"
                    size="30"
                  ></u-icon></view
                ><view v-else
                  ><u-icon
                    name="/static/icons/icon-wechat.png"
                    size="30"
                  ></u-icon></view
                ><text
                  class="text-sm ml-2"
                  :class="themeBg == 4 ? 'text-white' : 'text-dark'"
                  >{{ info.wechatNum }}</text
                ></view
              >
              <view class="flex items-center py-0.5" v-if="info.isShowQQ"
                ><view v-if="themeBg == 4"
                  ><u-icon
                    name="/static/icons/icon-qq-white.png"
                    size="30"
                  ></u-icon></view
                ><view v-else
                  ><u-icon
                    name="/static/icons/icon-qq.png"
                    size="30"
                  ></u-icon></view
                ><text
                  class="text-sm ml-2"
                  :class="themeBg == 4 ? 'text-white' : 'text-dark'"
                  >{{ info.qqNum }}</text
                ></view
              >
              <view class="flex items-center py-0.5" v-if="info.isShowPhone"
                ><view v-if="themeBg == 4"
                  ><u-icon
                    name="/static/icons/icon-phone-white.png"
                    size="30"
                  ></u-icon></view
                ><view v-else
                  ><u-icon
                    name="/static/icons/icon-phone.png"
                    size="30"
                  ></u-icon></view
                ><text
                  class="text-sm ml-2"
                  :class="themeBg == 4 ? 'text-white' : 'text-dark'"
                  >{{ info.phone }}</text
                ></view
              >
            </view>
            <view>
              <image class="w-28 h-28 rounded-lg" :src="info.headUrl" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { parentUserCard } from '../../services/account';

export default {
  data() {
    return {
      info: {},
      themeBg: 1,
    };
  },
  async created() {
    this._parentUserCard();
  },
  methods: {
    //获取师傅名片信息
    async _parentUserCard() {
      const { code, data } = await parentUserCard();
      if (code != 200) return;
      this.info = data;
      //判断背景图是否黑色（白字）
      if (this.info.backgroundUrl.indexOf('bg-color4') != -1) {
        this.themeBg = 4;
      }
    },
  },
};
</script>

<style>
page {
  background: #f2f2f2;
}
</style>
